<template>
	<view class="login-form-wrapper">
		<view class="login-input-wrapper">
			<input placeholder="用户名/手机号" v-model="username"/>
		</view>
		<view class="login-input-wrapper flexRowNoWrapBetween">
			<input placeholder="密码" :password="isPassword"  v-model="password"/>
			<label class="iconfont" :class="isPassword ? 'icon-nosee':'icon-open-eye'" @click="checkIsPassword"></label>
		</view>
		<view class="login-btn-wrapper">
			<button @click="login" :disabled="isLoading" :loading="isLoading">登录</button>
			<button @click="reset">重置</button>
		</view>
		<view class="login-linker flexRowNoWrapBetween">
			<view @click="goRegist">没有账号？去注册一个</view>
			<view @click="goForgetPwd">忘记密码</view>
		</view>	
	</view>
</template>

<script>
	import {isEmpty} from '@/utils/jk-validate.js'
	export default {
		data() {
			return {
				username: '',
				password: '',
				isPassword: true,
				isLoading: false
			}
		},
		methods: {
			checkIsPassword(){
				this.isPassword = !this.isPassword;
			},
			login() {
				let _that = this;
				let msg = isEmpty(_that.username,'用户名不能为空')
				if( msg!= 1){
					uni.showToast({
						icon:'none',
						duration:2000,
						title:msg
					})
				}else{
					_that.isLoading = true;
					setTimeout(function(){
						_that.isLoading = false;
						uni.showToast({
							icon:'none',
							duration:1000,
							title:'登录成功'
						})
					},2000)
				}
			},
			reset(){
				this.username = '';
				this.password = '';
			},
			goRegist(){
				uni.navigateTo({
					url:'./regist?flag=regist'
				})
			},
			goForgetPwd(){
				uni.navigateTo({
					url:'./regist?flag=pwd'
				})
			}
		},
		
	}
</script>

<style lang="scss">
.login-form-wrapper{
	padding: 50rpx;
	.login-input-wrapper{
		padding: 20rpx;
		border: solid 1rpx #9F9F9F;
		border-radius: 8rpx;
		&:not(:last-child){
			margin-bottom: 50rpx;
		}
	}
	.login-btn-wrapper{
		button{
			background-color: $jk-color-primary;
			color: $jk-color-white;
			&:not(:last-child){
				margin-bottom: 30rpx;
			}
		}
	}
	.login-linker{
		margin-top: 20rpx;
		font-size: 24rpx;
		color: $jk-text-color;
		text-decoration: underline;
	}
}
</style>